<template>
	<view>
		<view class="content-tittle">
			<u-icon name="edit-pen" size="48rpx" color="#C4A880"></u-icon>
			<text>大家都在看</text>
		</view>
		<view class="content-image-body">

			<block v-for="(item1,i1) in imageList" :key="i1">
				<view class="content-image">
					<image :src="item1.image_src"></image>
					<text>{{item1.img_name}}</text>
					<view class="text-name">
						{{item1.name}}
					</view>
				</view>
			</block>
		</view>
		<!-- 详情 -->
		<view class="list-image-box" v-for="(item,i) in list" :key="i">
			<view class="left-image">
				<image :src="item.image_name"></image>
			</view>
			<view class="left-text">
				{{item.text_name}}
				<view class="text-area">
					<view class="text-center">
						{{item.text}}
					</view>
					{{item.author}}
				</view>
				<view class="foot">
					{{item.right}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "all-read",
		props: {
			item1: {
				type: Object
			}
		},
		data() {
			return {
				imageList: [{
						image_src: "https://img-tailor.11222.cn/bcv/big/1180718349100.jpg",
						img_name: "成为祭灵开始",
						name: "大雾"
					},
					{
						image_src: "https://img-tailor.11222.cn/bcv/big/1105288291579.jpg",
						img_name: "直男爹惹不起",
						name: "无敌小脑"
					},
					{
						image_src: "https://img-tailor.11222.cn/bcv/big/1162267926898.jpg",
						img_name: "爸爸不是超人",
						name: "清扬婉兮"
					},
					{
						image_src: "https://img-tailor.11222.cn/bcv/big/1146837446688.jpg",
						img_name: "功德印",
						name: "青衫烟雨"
					}
				],
				list:[{
					image_name:"https://img-tailor.11222.cn/bcv/big/1166227941394.jpg",
					text_name:"最后一个摸金天师",
					text:"我开了一家古董当铺，一次我贪图小利，收了一对诡异血玉，从此，我被厄运缠身，当我平淡的人生发生翻天覆地的变化，我成了天底下最后一个摸金天师......",
					right:"连载",
					author:"独孤陌客"
				},
				{
					image_name:"https://img-tailor.11222.cn/bcv/big/1158218359592.jpg",
					text_name:"神豪从两万比特币开始",
					text:"穿越平行世界，林宇只想做一个低调的富二代。 但是家族企业受到愁人暗算，一夜之间，公司倒闭，父母相继离世。 就在林宇立志要白手起家，重振家族企业的时候，一个不明来路的U盘出现在他的眼前......",
					right:"完结",
					author:"乾玄用久"
				},
				{
					image_name:"https://img-tailor.11222.cn/bcv/big/202101151628055400.jpg",
					text_name:"战神归来",
					text:"五年前，他是豪门弃子，过街老鼠，人人喊打，整个江城，唯有一个女孩相信他。五年后，他是最强兵器，人间太岁，亿人尊崇，整个世界，无数人愿称他为最强。如今，王者再次踏临故土，昔日恩怨情仇，从现在开始清算......",
					right:"完结",
					author:"外语簿"
				},
				{
					image_name:"https://img-tailor.11222.cn/bcv/big/1156678345083.jpg",
					text_name:"流浪图书",
					text:"诺尔雷达大陆有一个传说，传说有一本魔法书，它能让人起死回生，永葆青春，扭转乾坤，可以满足人的一切欲望。 可是，没有人知道它是否真的存在，也没有人知道它在哪里.....",
					right:"完结",
					author:"悦小主"
				}
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
	.content-tittle {
		font-size: 36rpx;
		font-weight: solid;
		padding: 20rpx;

		text {
			padding-left: 20rpx;
		}
	}

	.content-image-body {
		margin: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		// width: 33.3%;
		.content-image {
			display: flex;
			flex-direction: column;
			margin: 20rpx 10rpx;

			.text-name {
				color: gray;
				margin: 10rpx;
				font-size: 24rpx;
			}

			text {
				margin-top: 10rpx;
				font-size: 24rpx;
			}

			image {
				width: 150rpx;
				height: 250rpx;
				// margin-right: 30rpx;
				border-radius: 10rpx;
			}
		}
	}

	.list-image-box {
		border-top: 1px solid #DCDFE6;
		display: flex;
		margin: 20rpx;

		.left-image {
			display: flex;
			margin-top: 20rpx;

			image {
				width: 200rpx;
				height: 300rpx;
				margin-right: 30rpx;
				border-radius: 10rpx;
			}
		}

		.left-text {
			font-size: 40rpx;
			margin-top: 20rpx;

			.text-area {
				font-size: 30rpx;
				color: gray;
				padding: 20rpx 0;

				.text-center {
					font-size: 30rpx;
					color: gray;
					height: 100rpx;
					padding: 20rpx 0;
					margin-bottom: 10rpx;
					white-space: wrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.foot {
				border: 1px solid #18B566;
				font-size: 24rpx;
				color: #18B566;
				background: #fff;
				border-radius: 10rpx;
				width: 80rpx;
				padding: 10rpx;
				margin-top: 10rpx;
				text-align: center;

			}
		}

	}
	
</style>
